<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mySample11</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
    <script src="../webgl-utils.js"></script>
    <script src="../webgl-ui.js"></script>
    <script src="../m3.js"></script>
    <script src="../m4.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <!-- <div id="uiContainer">
        <div id="ui">
            <div id="targetAngle"></div>
            <div id="targetHeight"></div>
        </div>
    </div> -->
    <!-- vertex shader -->
    <script id="vertex-shader-3d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec4 a_color;

uniform mat4 u_matrix;

varying vec4 v_color;

void main() {
  // Multiply the position by the matrix.
  gl_Position = u_matrix * a_position;

  // Pass the color to the fragment shader.
  v_color = a_color;
}
</script>
    <!-- fragment shader -->
    <script id="fragment-shader-3d" type="x-shader/x-fragment">
precision mediump float;

// Passed in from the vertex shader.
varying vec4 v_color;

void main() {
   gl_FragColor = v_color;
}
</script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/headdata.js"></script>
</body>


</html>